import { Component, Emit, Prop, Vanilla, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import { useBasicStore } from '@/stores/basic'
import { DeviceEnum } from '@/const/enum'
import toNative from '@/utils/toNative'
import type { ComponentPublicInstance } from 'vue'
import { Button, Modal } from 'ant-design-vue'

@Component
export class Dialog extends Render {
    @Prop() show!: boolean
    @Prop() width?: string | number
    @Prop({ default: false }) hideCancel?: boolean

    basicStore = useBasicStore()
    showDrawer = false

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
    }
    @Watch('showDrawer')
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    get dialogWidth() {
        return this.basicStore.device === DeviceEnum.Mobile ? '95%' : this.width || '50%'
    }

    render(data: ComponentPublicInstance) {
        return (
            <Modal
                v-model:open={this.showDrawer}
                width={this.dialogWidth}
                v-bind={this.$attrs}
                title={this.$attrs.title as string}
                v-slots={{
                    header: data.$slots.header,
                    default: data.$slots.default,
                    footer: () => {
                        return (
                            <div class="flex justify-center gap-16px">
                                {!this.hideCancel && <Button onClick={() => this.showDrawer = false}>取消</Button>}
                                {data?.$slots?.footer?.()}
                            </div>
                        )
                    },
                }}
            ></Modal>
        )
    }
}

export default toNative<
    { show: boolean; width: number | string; [key: string]: any; alignCenter: boolean, hideCancel?: boolean },
    {}
>(Dialog)
